<!--
 * @Author: Bonnie
 * @Date: 2021-12-17 16:21:20
 * @LastEditTime: 2021-12-17 16:39:00
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/angle_mark/index.vue
-->
<template>
  <div class="root-container">
    <h2 class="mb10">看，我有角标哦</h2>
    <el-input v-model="val" :style="{width:'400px'}" />
    <div class="avatar mt20">
      <div class="angle_mark">
        <span>{{val}}</span>
      </div>
      <img :src="$init_avatar" alt />
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      val: "i'm 角标"
    };
  }
};
</script>
<style lang='scss' scoped>
.avatar {
  // 父容器
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;

  // 角标
  .angle_mark {
    position: absolute;
    top: -50px;
    right: -50px;
    background-color: #7173da;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    // 角标文字
    span {
      position: absolute;
      display: inline-block;
      color: #fff;
      width: 100%;
      bottom: 0;
      left: 0;
      text-align: center;
    }
  }
}
</style>